<!-- @format -->
<script setup>
</script>

<template>
    <div class="article-box">
        <!-- 面包屑导航组件 -->
        <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片组件 -->
        <el-card>
            <!-- 头部 -->
            <template #header>
                <div class="card-header">
                    <span>共 xxx 条记录</span>
                    <el-button type="primary" round>
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>新增文章</span>
                    </el-button>
                </div>
            </template>
            <!-- 主体：表格区域 -->
            <el-table border striped>
                <el-table-column prop="stem" label="标题" width="300" />
                <el-table-column prop="creator" label="作者" width="180" />
                <el-table-column prop="category" label="类别" width="140" />
                <el-table-column prop="likeCount" sortable label="点赞" width="140" />
                <el-table-column prop="views" sortable label="浏览数" width="140" />
                <el-table-column prop="createdAt" label="创建时间" width="240" />
                <el-table-column label="操作">
                </el-table-column>
            </el-table>
            <!-- 底部：分页组件 -->
            <template #footer>
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </template>
        </el-card>

    </div>
</template>

<style scoped lang="scss">
.article-box {
    .el-card {
        margin-top: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
        }

        :deep(.el-card__footer) {
            margin-top: -15px;
            border-top: none;
        }

        .el-table {
            .el-icon:nth-child(2) {
                margin: 0 15px;
            }
        }

        .el-pagination {
            display: flex;
            justify-content: center;
        }
    }
}
</style>
